<template>
  <div class="player" :class="{ 'is-show': showPlayer }">
    <base-mask :bgImage="songPicUrl"/>

    <audio class="audio"
      ref="audio"
      autoplay
      :src="songUrl"
      @ended="onEnded"
      @timeupdate="onTimeUpdate"></audio>

    <player-navbar
      :song-name="songName"
      :artists="formatedAr"
      @hide-player="onHidePlayer"/>

    <keep-alive>
      <div v-if="!showLyric" class="p-content-wrapper">
        <player-album
          :imgUrl="songPicUrl"
          :name="songName"
          @click.native="showLyric = true"/>
        <player-menu-bar />
      </div>

      <player-lyric v-else
        :songId="songId"
        :ct="ct"
        @click.native="showLyric = false"/>
    </keep-alive>

    <player-progress-bar class="p-progress-bar"
      :ct="ct"
      :song-dt="songDt"
      @update-time="updateTime"/>

    <player-control-bar
      :showPlaylist.sync="showPlaylist"
      @reset-ct="resetCt"/>

    <player-playlist
      :showPlaylist.sync="showPlaylist"
      :playlist="playlist"
      :song-id="songId"/>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatArtists } from '@/utils'
import PlayerNavbar from './components/PlayerNavbar'
import PlayerAlbum from './components/PlayerAlbum'
import PlayerLyric from './components/PlayerLyric'
import PlayerMenuBar from './components/PlayerMenuBar'
import PlayerProgressBar from './components/PlayerProgressBar'
import PlayerControlBar from './components/PlayerControlBar'
import PlayerPlaylist from './components/PlayerPlaylist'

export default {
  name: 'player',
  components: {
    PlayerNavbar,
    PlayerAlbum,
    PlayerLyric,
    PlayerMenuBar,
    PlayerProgressBar,
    PlayerControlBar,
    PlayerPlaylist
  },
  data () {
    return {
      ct: 0, // 当前播放时间(currentTime * 1000)，单位为 ms
      audio: null, // audio 元素
      showPlaylist: false, // 是否显示播放列表
      showLyric: false // 是否显示歌词
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.audio = this.$refs.audio
      this.$store.dispatch('player/getAudio', this.audio)
    })
  },
  computed: {
    ...mapGetters([
      'showPlayer',
      'songId',
      'songUrl',
      'songPicUrl',
      'songName',
      'songAr',
      'isPlay',
      'songDt',
      'playlist']),
    formatedAr () {
      return this.songAr.length ? `${formatArtists(this.songAr)} >` : ''
    }
  },
  methods: {
    onHidePlayer () {
      this.$store.dispatch('player/toggleShowPlayer')
      this.showLyric = false
    },
    onEnded () {
      // 切换到下一首歌
      this.$store.dispatch('player/togglePlayNext')
    },
    // 不能在计算属性中获取 currentTime，这是一种变通：通过监听 timeupdate 事件，单位为 s
    onTimeUpdate () {
      this.ct = this.audio.currentTime * 1000
    },
    updateTime (ct) {
      this.audio.currentTime = ct / 1000
    },
    formatArtists (ar) {
      return formatArtists(ar)
    },
    toggleShowLyric () {
      this.showLyric = !this.showLyric
    },
    resetCt () {
      this.$store.dispatch('player/togglePlay')
      this.ct = 0
    }
  },
  watch: {
    /* isPlay (newVal) {
      if (newVal) {
        this.audio.play()
      }
    } */
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';

.player {
  z-index: 999;
  position: fixed;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  transform: translateX(100%);
  background-color: #2f2f2f;
  transition: all .3s;
  &.is-show {
    transform: translate3d(0, 0, 0);
  }
  /* 隐藏 audio 元素 */
  .audio {
    position: abolute;
    visibility: hidden;
  }
}
</style>

<style lang="scss">
.p {
  &-Navbar {}
  &-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    .p-album {
      flex: 1;
    }
    .p-menu-bar {
      height: .5rem;
    }
  }
  &-lyric {
    flex: 1;
  }
  &-progress-bar {
    /* padding: 0 .1rem; */
  }
  &-ctrl-bar {}
}
</style>
